<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <div class="container" style="padding-top: 30px;">
            <div class="panel panel-primary">

                <div class="panel-heading">品牌管理</div>
                <div class="panel-body">

                    <form action="" method="POST" class="form-inline" role="form">

                        <div class="form-group">
                            <label for="id">id：</label>
                            
                            <input type="text" class="form-control" id="id" placeholder="请输入id"  v-model='id'>
                        </div>
                        <div class="form-group">
                            <label  for="name">name：</label>
                            
                            <input type="text" class="form-control" id="name" placeholder="请输入名字"  v-model='name'>
                        </div>


                        <button type="button" class="btn btn-primary" @click='add'>提交</button>
                        <div class="form-group">
                            <label  for="keyWords">关键字：</label>
                            <input type="text" class="form-control" id="keyWords" placeholder="请输入关键字"  v-model="keyWords">
                        </div>
                    </form>

                </div>

               

            </div>
            <table class="table table-bordered ">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='(item,index) in getSearchList()' :key='item.id'>
                        <th>{{item.id}}</th>
                        <th>{{item.name}}</th>
                        <th>{{item.time}}</th>
                        <th><a @click='del(index)'>删除</a></th>
                    </tr>
                </tbody>
            </table>



        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                id:'',
                name:'',
                keyWords:'',
                list:[{
                    id:1,
                    name:'布加迪',
                    time: new Date()
                },{
                    id:2,
                    name:'肯尼塞克',
                    time: new Date()
                }]

            },
            methods:{
                //搜索
                getSearchList(){
                    return this.list.filter(item=>item.name.includes(this.keyWords))
                },
                add(){
                    //在提交之前，应该先进行表单校验
                   if(!this.id) {
                       alert('请填写id')
                       return;
                   }
                   if(!this.name) {
                       alert('请填写name')
                       return;
                   }
                   if(this.list.some(item=>item.id == this.id)){
                       alert('id重复')
                       return
                   }
                   //添加数据
                   this.list.push({
                       id:this.id,
                       name:this.name,
                       time:new Date()
                   })
                },
                //删除数据
                del(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>

</html>